<template>
  <div class="teachingTime">
     <div id="container" v-show="!loader.show">
       <div class="header_group">
              <h6>教学时间</h6>
              <p>点击表格即可选中或取消选中</p>
        </div>
        <table cellpadding="0" cellspacing="0">
              <thead>
                     <tr>
                          <th width="23%">教学时间</th>
                          <th width="11%">一</th>
                          <th width="11%">二</th>
                          <th width="11%">三</th>
                          <th width="11%">四</th>
                          <th width="11%">五</th>
                          <th width="11%">六</th>
                          <th width="11%">日</th>
                     </tr>
              </thead>
              <tbody>
                     <tr>
                          <td>上午</td>
                          <td :class="{'selected':selectedTime.indexOf('1a')>-1}" @click="toggle('1a')"></td>
                          <td :class="{'selected':selectedTime.indexOf('2a')>-1}" @click="toggle('2a')"></td>
                          <td :class="{'selected':selectedTime.indexOf('3a')>-1}" @click="toggle('3a')"></td>
                          <td :class="{'selected':selectedTime.indexOf('4a')>-1}" @click="toggle('4a')"></td>
                          <td :class="{'selected':selectedTime.indexOf('5a')>-1}" @click="toggle('5a')"></td>
                          <td :class="{'selected':selectedTime.indexOf('6a')>-1}" @click="toggle('6a')"></td>
                          <td :class="{'selected':selectedTime.indexOf('7a')>-1}" @click="toggle('7a')"></td>
                     </tr>
                     <tr>
                          <td>下午</td>
                          <td :class="{'selected':selectedTime.indexOf('1b')>-1}" @click="toggle('1b')"></td>
                          <td :class="{'selected':selectedTime.indexOf('2b')>-1}" @click="toggle('2b')"></td>
                          <td :class="{'selected':selectedTime.indexOf('3b')>-1}" @click="toggle('3b')"></td>
                          <td :class="{'selected':selectedTime.indexOf('4b')>-1}" @click="toggle('4b')"></td>
                          <td :class="{'selected':selectedTime.indexOf('5b')>-1}" @click="toggle('5b')"></td>
                          <td :class="{'selected':selectedTime.indexOf('6b')>-1}" @click="toggle('6b')"></td>
                          <td :class="{'selected':selectedTime.indexOf('7b')>-1}" @click="toggle('7b')"></td>
                     </tr>
                     <tr>
                          <td>晚上</td>
                          <td :class="{'selected':selectedTime.indexOf('1c')>-1}" @click="toggle('1c')"></td>
                          <td :class="{'selected':selectedTime.indexOf('2c')>-1}" @click="toggle('2c')"></td>
                          <td :class="{'selected':selectedTime.indexOf('3c')>-1}" @click="toggle('3c')"></td>
                          <td :class="{'selected':selectedTime.indexOf('4c')>-1}" @click="toggle('4c')"></td>
                          <td :class="{'selected':selectedTime.indexOf('5c')>-1}" @click="toggle('5c')"></td>
                          <td :class="{'selected':selectedTime.indexOf('6c')>-1}" @click="toggle('6c')"></td>
                          <td :class="{'selected':selectedTime.indexOf('7c')>-1}" @click="toggle('7c')"></td>
                     </tr>
              </tbody>
        </table>
        <p class="commit" @click="commit();">保存</p>
     </div>
     <!--公共提示-->
     <tip :tip="tip" :loading="loading" :loader="loader"></tip>
  </div>
</template>

<script>
import tip from './tip'
export default {
    name:'teachingTime',
    data(){
        return{
            selectedTime:[],
            show:true,
            userId:'',
            tip:{
              status:false,
              msg:''
            },
            loading:{
              status:false,
              msg:''
            },
            loader:{
              show:true
            },
            url:''
        }
    },
    components:{
      tip
    },
    mounted:function(){
        this.userId = this.$route.query.userId;
        this.getInitialData();
    },
    methods:{
        toggle(id){
            let index=this.selectedTime.indexOf(id);
            if(index>-1){
                this.selectedTime.splice(index,1);
            }else{
                 this.selectedTime.push(id);
            }
        },
        getInitialData(){
            let _this=this;
            _this.$http.get("/api/teacherController.do?id="+_this.userId+"&getTeacherTeachingInfoById=null").then((data)=>{
               console.log(data);
               if(data.body){
                  _this.selectedTime=data.body.teachTime.split("|");
                  _this.url="/api/teacherController.do?updateTeacherTeachingTimeInfo";
               }else{
                  _this.url="/api/teacherController.do?saveTeacherTeachingInfo";
               }
               _this.loader.show=false;
            })
        },
        commit(){
            let _this=this;
            if(_this.selectedTime.length==0){
                _this.tip.msg="请选择上课时间";
                _this.tip.status=true;
                setTimeout(function(){_this.tip.status=false;},1000);
                return false;
            }
            _this.loading.msg="提交中...";
            _this.loading.status=true;
            _this.$http.post(_this.url,
                            {
                              id:_this.userId,
                              teachTime:_this.selectedTime.join('|')
                            })
                .then(
                  (response)=>{
                     _this.loading.status=false;
                     _this.tip.msg="保存成功";
                     _this.tip.status=true;
                     setTimeout(function(){
                        _this.tip.status=false;
                        _this.$router.push({path: '/index'});
                     },1000);
                  },
                  (error)=>{
                    _this.loading.status=false;
                    console.log(error);
                  }
                );
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.teachingTime
{
    .header_group
    {
        padding:0.5rem 0;
        text-align:center;
        h6
        {
          color:#078def;
          font-size:0.5rem;
          margin-bottom:0.3rem;
        }
        p 
        {
          color:#999;
        }
    }
    table
    {
        width:100%;
        background:#fff;
        border-collapse: collapse;
        tr
        {
            line-height:0.88rem;
            td,th
            {
                border:1px solid #eee;
                text-align:center;
                &.selected
                {
                    position:relative;
                    &::after
                    {
                       content:'√';
                       display:inline-block;
                       background:#078def;
                       width:0.36rem;
                       height:0.36rem;
                       line-height:0.36rem;
                       border-radius:50%;
                       color:#fff;
                       text-align:center;
                       font-size:0.24rem;
                    }
                }
            }
        }
    }
    .commit
    {
        margin:0.24rem;
        line-height:0.8rem;
        height:0.8rem;
        border-radius:0.1rem;
        border:1px solid #078def;
        text-align:center;
        background:#078def;
        color:#fff;
        font-size:0.32rem;
    }
}
</style>
